<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客首页</title>
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/blog/amaze/css/base.css">
    <link href="/admin/plugins/editormd/css/editormd.css" rel="stylesheet"/>
    <link href="/imgs/favicon.ico" rel="shortcut icon">

    <style>
        .layui-nav {
            opacity: 0.5;
            z-index: 3;
            position: fixed;
        }
         .article-body li{
             list-style: unset;
         }
        .article-body table{


        }
    </style>

    <link rel="stylesheet" href="/css/like.css">
    <script src="/js/like.js"></script>

    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script src="/js/kawai.js"></script><!--必须在后面-->
</head>
<body>

<div th:replace="~{commons/blog_commons::topbar}"></div>

<!--<div th:replace="~{commons/blog_commons::topimg}"></div>-->

<header class="intro-header" style="background-image:url(/imgs/like.jpeg);">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                  <span class="subheading">
                      <h2 style="left: 0;position: absolute;margin-top: -30px;" th:text="${blog.getTitle()}"></h2>
                        <span style="display: inline-block;left: 0;position: absolute;margin-top: 22px;" class="meta">
                            <div style="display: inline-block" th:text="${blog.getCreateTime()}"></div> &nbsp;
                                <div class="comments-view" style="display: inline-block">
                                    <a href="#comments" style="display: inline-block" class="article-comments">
                                        <div id="count_comments" style="display: inline-block" th:text="${count_commmets}"></div>条评论
                                    </a> &nbsp;
                                    <div style="display: inline-block" th:text="${blog.getViews()}"></div>浏览
                                </div>
                        </span>
                        <div class="tags post-tags">
                            <div style="left: 0;position: absolute;margin-top: 60px;">
                                <a class="tag" rel="tag" th:each="tag:${tags}" href="#">
                                    <div th:text="${tag.getName()}"></div>
                                </a>&nbsp;
                            </div>
                        </div>
                  </span>
                </div>
            </div>
        </div>
    </div>
</header>


<!--主体-->
<div class="container">
    <div class="am-g am-g-fixed blog-fixed">
        <div class="am-u-lg-12 am-u-sm-12">
            <article class="am-article blog-article-p article-trigger">
                <div id="post-content" class="am-article-bd article-body">
                    <div th:utext="${blog.getContent()}"></div>
                    <aside class="blog-rights clearfix">
                        <p>本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</p>
                    </aside>
                </div>
            </article>
            <hr>
        </div>
    </div>
    <aside class="comments" id="comments">

        <article class="comment" th:each="comment:${comments}" th:if="${comment.getStatus()==1}">
            <header class="clearfix">
                <div class="meta" style="margin-left: 0">
                    <h3 style="text-align: left;font-size: 25px;margin-bottom: 2px;" th:text="${comment.getCommentator()}"></h3>
                    <span class="date" >
                                       评论时间：[[${comment.getCommentTime()}]]
                                    </span>
                </div>
            </header>
            <div class="body" th:text="${comment.getContent()}" style="margin-left: 0"></div>
        </article>

        <div id="curr" th:text="${curr}" hidden></div>
        <div id="comment_pages"></div>

    </aside>

    <aside class="create-comment" id="create-comment">
        <hr>
        <h2><i class="fa fa-pencil"></i> 添加评论</h2>
        <div id="enable_comment" th:text="${blog.getEnComment()}" hidden></div>
        <form id="comment_form" onsubmit="return false;">
            <table id="commentForm" class="form">
                <tbody>
                <tr>
                    <td>
                        <input id="blogId" name="blogId" th:value="${blog.getId()}" hidden>
                        <input type="text" name="commentator" th:disabled="${blog.getEnComment()==1}" id="commentator" placeholder="(*必填)怎么称呼你?" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="email" name="email" id="email" th:disabled="${blog.getEnComment()==1}" placeholder="(*必填)你的联系邮箱" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="url" id="url" th:disabled="${blog.getEnComment()==1}" placeholder="你的网站地址(可不填)">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input style="width:50%" type="text" name="verifyCode" th:disabled="${blog.getEnComment()==1}" id="verifyCode" placeholder="(*必填)请输入验证码" required>&nbsp;&nbsp;
                        <img id="verify" alt="单击图片刷新！" class="pointer" style="margin-top: 15px; border-radius: 25px;"
                             src="/common/kaptcha" onclick="this.src='/common/kaptcha?d='+new Date()*1">
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea rows="5" name="content" id="content" th:disabled="${blog.getEnComment()==1}" placeholder="(*必填)请输入你的评论" required></textarea>
                    </td>
                </tr>
                </tbody>
            </table>
            <button id="comment_insert_btn" style="float:left;" class="layui-btn layui-btn-lg layui-btn-normal">提交</button>
        </form>
    </aside>

    <p class="back-top" id="back-top" style="display:none"><a href="#top"><span></span></a></p>
</div>

<div th:replace="~{commons/blog_commons::footer}"></div>

<script>
    $(".article-body table").attr("class","layui-table");
</script>


<script src="/js/public.js"></script>
<script src="/js/detail.js"></script>
</body>
</html>